<template>
	<view>
		<view class="cityBar ">
			<view class="rows" :style="{height:System.statusBarHeight+'px'}"></view>
			<view class="d-flex a-center" :style="{width:navWidth+'px',height:navHeight+'px'}">
				<view class="iconfont icon-xiangzuo size36 black padding20" @click="$back()"></view>
				<text class="size32 black bold">选择城市</text>
			</view>
			<view class="viewbox auto d-flex a-center m-top20 m-bot20 search">
				<view class="iconfont icon-btn_search color_99 size36"></view>
				<input type="text" class="flex-1 height p-left10 size26 color_33" 
				      v-model="searchCity" placeholder="输入城市" >
			</view>
		</view>
		
		<view class="rows" :style="{height:fiexHeight+'px'}"></view>
		<scroll-view scroll-y="true" class="scrollY" :scroll-top="scrolltop" @scroll="scroll" :scroll-into-view="scrollintoview" v-show="!searchCity">
		<view class="hotCity">
			<text class="size28 color_99">热门城市</text>
			<view class="row j-sb">
				<block v-for="(item,index) in cityList.hit" :key="index">
				 <view class="hot flexac" @click="citySelect(item)">{{item.name}}</view>
				</block>
			</view>
		</view>
		
		<view class="allCity">
			<view class="row m-top20" :id="`city_${item.name}`" v-for="(item,index) in cityList.result" :key="index">
				<text class="color_99 size28">{{item.name}}</text>
				<view class="cityLi" @click="citySelect(subItem)" v-for="(subItem,subIndex) in item.data" :key="subIndex">{{subItem.name}}</view>
			</view>
		</view>
		</scroll-view>
		
		<view class="cityPostion" v-show="!searchCity">
			<view class="citpost flexac" @click="Togcity(item)" :class="{'active':item.name === scrollname}" 
			     v-for="(item,index) in cityList.result" :key="index">
				<text class="txt">{{item.name}}</text>
			</view>
		</view>
		
		<!-- 搜索 -->
		<scroll-view scroll-y="true" class="sarchView" :style="{top:fiexHeight+'px'}" v-if="searchCity">
			<view class="rows" v-if="searchList && searchList.length">
			   <view class="cityLi" @click="citySelect(subItem)" v-for="(subItem,subIndex) in searchList" :key="subIndex">{{subItem.name}}</view>
			</view>
			<emptys empty="search" v-else title="无相关信息"></emptys>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import cityData from './city.json';
	export default {
		data() {
			return {
				searchCity:'',
				scrolltop:0,
				cityList:'',
				scrollname:'',
				scrollintoview:'',
				allData:[],
			}
		},
		onLoad(){
			this.cityList = cityData;
		},
		 onShow(){
			 let that = this;
			 setTimeout(()=>{
				 that.cityList.result.forEach((item,index)=>{
					 that.allData = [...that.allData,...item.data];
					 that.getViewInfo(`#city_${item.name}`).then(res=>{
					 	 const result = res.top;
					 	 item.tops = result
					 })
				 })
			 },1000)
		},
		methods: {
			...mapMutations(['SeletCity']),
			Togcity(item){
				this.scrollintoview = `city_${item.name}`
				this.scrollname = item.name;
			},
			getViewInfo(selector) {
				const query = uni.createSelectorQuery().in(this);
				return new Promise((resolve) => {
					query.select(selector).boundingClientRect(data => {
						resolve(data)
					}).exec();
				})
			},
			scroll(e){
				let that = this;
				const scrollTop = e.detail.scrollTop;
				const result = that.cityList.result;
				const fiexHeight = that.fiexHeight;
				for(let i=0;i<result.length;i++){
				    if(scrollTop >= result[i].tops - fiexHeight && i == result.length -1){
				    	that.scrollname = result[i].name;
						break;
				    }
					if(scrollTop >= result[i].tops - fiexHeight && scrollTop < result[i+1].tops - fiexHeight && i != result.length -1){
						that.scrollname = result[i].name;
					}
					if(scrollTop < result[0].tops - fiexHeight) that.scrollname = '';
				}
			},
			
			citySelect(item){
				console.log(item);
				this.SeletCity(item);
				this.$back();
			}
			
		},
		computed:{
			...mapState(['navHeight','navWidth','System']),
			fiexHeight(){
				return this.System.statusBarHeight+this.navHeight+70
			},
			
			searchList(){
				if(!this.allData.length || !this.searchCity) return;
				return this.allData.filter((n)=>n.name.indexOf(this.searchCity) != -1);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cityBar{
		width:100%;
		position: fixed;
		top:0;
		left:0;
		background-color: #ffffff;
		z-index:100;
	}
	.search{
		height: 70rpx;
		background-color: #f3f4f5;
		border-radius: 10rpx;
		overflow: hidden;
		padding:0 20rpx;
	}
	.scrollY{
		width:100%;
		height: 100vh;
	}
	.hot{
		width: calc((100% - 60rpx) / 4);
		height: 66rpx;
		position: relative;
		margin-top:20rpx;
		font-size:28rpx;
		color:#333;
	}
	.hot::after{
		content: "";
		width: 200%;
		height: 200%;
		box-sizing: border-box;
		border: 1px solid #d6d6d6;
		border-radius: 10rpx;
		overflow: hidden;
		position: absolute;
		left: 0;   
		top: 0;
		transform: scale(.5);
		transform-origin: 0 0;
	}
	.hotCity{
		width:680rpx;
	    padding-left:30rpx;
	}
	.allCity{
		width:680rpx;
		padding:30rpx 0 30rpx 30rpx;
	}
	.cityLi{
		width:100%;
		padding:24rpx 0;
		position: relative;
		color:#333;
		font-size:26rpx;
	}
	.cityLi::after{
		content: "";
		width: 200%;
		height: 200%;
		position: absolute;
		left: 0;
		top: 0;
		border-bottom: 1px solid #d6d6d6;
		transform: scale(.5);
		transform-origin: 0 0;
	}
	.cityPostion{
		position: fixed;
		top:50%;
		right:20rpx;
		z-index:101;
		transform: translate(0,-50%);
	}
	.citpost{
		margin:14rpx 0;
		width:36rpx;
		height: 36rpx;
		border-radius: 50%;
	}
	.txt{
		font-size:22rpx;
		color: #626262;
	}
	.active{
		background-color: #e9e9e9;
	}
	.sarchView{
		width:100%;
		background-color: #ffffff;
		padding-left:30rpx;
		position: fixed;
		left:0;
		bottom: 0;
		z-index:200;
	}
</style>
